<template>
  <div>
    <ATop :orderInfo="orderInfo" :orLiInfo="orLiInfo" />

    <!-- 补正记录+通知书 -->
    <template v-if="$app.judgeData(orderInfo) && ($app.judgeData(orderInfo.bz_list) || $app.judgeData(noticeData))">
      <Card class="marginB10">
        <Bz_list :orderInfo="orderInfo" :orLiInfo="orLiInfo" :noticeData="noticeData" />
      </Card>
    </template>

    <Middle :orderInfo="orderInfo" :orLiInfo="orLiInfo" style="margin-bottom:50px;" />

    <template v-if="$app.judgeData(orderInfo) && $app.judgeData(orLiInfo)">
      <div
        class="diBs tran3 overflowH f_16 c888"
        :style="`left: ${$store.state.F_cat.collapsed?'64':'200'}px;`"
      >
        总价：¥
        <span
          class="f_30 cRed f_bold mariginR30 relative paddingR10"
          style="top:3px;"
        >{{parseFloat(orLiInfo.order_money)}}</span>
        <span
          class="mariginR30"
          style="padding-right:50px;"
        >（官费：¥ {{parseFloat(orLiInfo.official_fee)}}； 服务费：¥ {{parseFloat(orLiInfo.service_fee)}} ）</span>
        已选择
        <span class="f_bold cRed">{{orderInfo.cg_list.length}}</span>
        大类，共
        <span class="f_bold cRed">{{xotW()}}</span>
        个小项
      </div>
    </template>
  </div>
</template>

<script>
import ATop from "./tmCom/aTop";
import Middle from "./tmCom/middle";
import Bz_list from "./tmCom/plugin/bz_list";

//all 通知书 js
import tabMcolTm from "@$@/js/$common/tabMcolTm";

export default {
  name: "tmDetails",
  components: { ATop, Middle, Bz_list },
  data() {
    let {
      $route: {
        query: { order_id }
      }
    } = this;
    let data = {
      order_id,
      orLiInfo: {}, //商品订单详情
      orderInfo: {} //服务订单详情
    };
    let tool = {
      noticeData: [] //商标通知书
    };
    return Object.assign(data, tool);
  },
  created() {
    this.getData(); //初次获取数据
  },
  mounted() {
    //
  },
  methods: {
    //小类计算
    xotW() {
      let out = 0;
      let {
        orderInfo: { cg_list }
      } = this;
      if ($app.judgeData(cg_list)) {
        cg_list.forEach((val, i) => {
          out += val.items.length;
        });
      }

      return out;
    },
    getData() {
      let { order_id } = this;
      //订单详情
      $ajax.orderInfo(order_id, resData => {
        this.orLiInfo = resData;
      });
      //商标详情
      $ajax.tmInfo(order_id, resData => {
        this.orderInfo = resData;

        // 商标通知书赋值
        this.noticeData = tabMcolTm.tm_notice_array(resData);
      });
    }
  }
};
</script>

